<script setup>
const props = defineProps({
  connections: {
    type: Array,
    required: true,
    default: () => []
    // [{ id, start: {x, y}, end: {x, y}, color }]
  },
  width: {
    type: [Number, String],
    default: '100%'
  },
  height: {
    type: [Number, String],
    default: '100%'
  }
})

function generateBezierPath(start, end) {
  const { x: x1, y: y1 } = start
  const { x: x2, y: y2 } = end
  const dx = Math.abs(x2 - x1)
  const cx1 = x1 + dx * 0.5
  const cy1 = y1
  const cx2 = x2 - dx * 0.5
  const cy2 = y2
  return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
}
</script>

<template>
  <svg class="connection-svg" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
    <defs>
      <marker
          v-for="connection in connections"
          :key="connection.id"
          :id="`arrowhead-${connection.id}`"
          markerWidth="10"
          markerHeight="7"
          refX="10"
          refY="3.5"
          orient="auto"
          markerUnits="strokeWidth"
      >
        <path d="M0,0 L10,3.5 L0,7" fill="currentColor" />
      </marker>
    </defs>

    <path
        v-for="connection in connections"
        :key="connection.id"
        :d="generateBezierPath(connection.start, connection.end)"
        :stroke="connection.color"
        stroke-width="2"
        fill="none"
        :marker-end="`url(#arrowhead-${connection.id})`"
    />
  </svg>
</template>
